<template>
  <view class="common-card cb-card" style="position: relative">
    <image src="/static/cb-bg.png" style="width: 170rpx;height: 170rpx;position: absolute;top: 0;right: 0"/>
    <item-blue-title-view title="超标信息" :show-bar="false" title-color="#E9473E"/>
    <view class="f_row_center" style="margin: 20rpx 0;">
      <view @click="itemClick(item)" class="flex_1 f_column_center" v-for="(item,ind) in list" :key="ind">
        <view style="position: relative" class="f_column_center">
          <span class="item-title">
           <span  :style="{'color':item.color}"  v-html="item.content"></span>
          <span  :style="{'color':item.color}" style="font-size: 16rpx;font-weight: normal" v-html="item.unit"></span>
          </span>
          <image :src="item.img" style="width: 175rpx;height: 175rpx"/>
        </view>
        <view class="item-content content-card" style="width: 160rpx">{{ item.title }}</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import {Vue, Component, Prop} from "vue-property-decorator";
import ItemBlueTitleView from "@/pages/components/item_blue_title_view.vue";
import XRouterConfig from "@/api/XRouterConfig";

@Component({
  components: {
    ItemBlueTitleView,
  }
})
//权属
export default class DataExceedInfoView extends Vue {
  @Prop() info?: any;


  get list() {
    let list = [
      {
        title: '基本办公用房',
        content: `${this.info.jbbgyfcbNum??''}`,
        unit: '<br/>家',
        path: 'data_exceed',
        img: '/static/jbbgyf.png',
        type: 'jbbgyfcbArea',
        // color:'#fff'
        color: '#E9473E'
      },
      {
        title: '办公室',
        content: `${this.info.bgscbNum??''}`,
        unit: '家',
        type: 'bgscbArea',
        path: 'data_exceed',
        img: '/static/bgs.png',
        // color:'#fff'
        color: '#966420'
      },
      {
        title: '房间人员',
        content: `${this.info.rycbNum??''}`,
        unit: '人',
        type: 'rycbArea',
        path: 'data_exceed',
        img: '/static/fjry.png',
        color: '#E9473E'
        // color:'#E9473E'
      },
    ];
    return list;
  }

  itemClick(item: any) {
    XRouterConfig.goTo(item.path, {type: item.type})
  }


}
</script>

<style scoped>
.item-title {
  position: absolute;
  z-index: 1;
  margin-top: 38rpx;
  text-align: center;
  font-size: 30rpx;
  font-weight: bold;
  line-height:24rpx;
}

.item-content {
  font-size: 24rpx;
  text-align: center;
  color: #969696;
}

.cb-card {
  background: linear-gradient(180deg, #FAE7E6, #FEFEFE);
}

.content-card {
  border-radius: 50rpx;
  font-size: 24rpx;
  box-shadow: 0px -2rpx 6rpx 0px rgba(196, 124, 24, 0.3600);
  background: #F2AA46;
  color: #ffffff;
  padding: 10rpx 16rpx;
  position: absolute;
  bottom: 20rpx;
}
</style>